<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>支付页</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<link rel="stylesheet" href="../Common/css/ufun.css" />
		<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script src="../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../Common/js/tools.js"></script>
	</head>
	<body>
		<section class="aui-flexView">
			<header>
				<div id="Left" class="com-btn" onmouseup="ThisClose();">
					<i class="material-icons">keyboard_arrow_left</i>
				</div>
				<div id="Title">支付界面</div>
			</header>
			<section class="aui-scroll-view">
				<div class="aui-flex-member-list">
					<h2>支付</h2>
					<ul class="aui-cho-box">
						<li class="aui-flex on">
							<div class="aui-flex-box">
								<h3>
									支付大标题
								</h3>
								<p>支付小标题(支付注释)</p>
							</div>
							<div class="aui-original-thj">
								价格 <i>￥</i>
							</div>
							<i class="aui-price">6</i>
						</li>
					</ul>
					<div style="display:none">
						<input name="" type="text" value="1" class="auiSks" />
					</div>
					<p class="aui-total b-line">
						需要支付： <span>6</span>
						元，暂不支持支付宝支付，请使用微信支付
					</p>
					<div class="chi">
						<div class="aui-flex b-line" style="padding:15px 0">
							<div class="aui-flex-wx">
								<img src="img/icon-wx.png" alt="">
							</div>
							<div class="aui-flex-box aui-flex-box-clear">
								<h4>
									微信支付
									<em class="aui-flex-box-tj">
										<img src="img/icon-tj.png" alt="">
									</em>
								</h4>
								<p>亿万用户的选择，更快更安全</p>
							</div>
							<div class="aui-payment-method">
								<label class="cell-right">
									<input type="radio" name="radio" value="wx" checked="checked">
									<i class="cell-radio-icon"></i>
								</label>
							</div>
						</div>
						<div class="aui-flex b-line" style="padding:15px 0">
							<div class="aui-flex-wx">
								<img src="img/icon-zfb.png" alt="">
							</div>
							<div class="aui-flex-box">
								<h4>支付宝支付</h4>
								<p>亿万用户的选择</p>
							</div>
							<div class="aui-payment-method">
								<label class="cell-right">
									<input type="radio" name="radio" value="zfb">
									<i class="cell-radio-icon"></i>
								</label>
							</div>
						</div>
					</div>
				</div>
			</section>
			<footer class="aui-tabBar aui-tabBar-fixed">
				<button class="aui-tabBar-btn">确认支付</button>
			</footer>
		</section>
		<script type="text/javascript">
			$(function() {
			/*动态显示支付金额*/
			var $li = $(".aui-cho-box").children("li.on");
			var money = $li.children("i").text();
			$(".aui-total span").text(money);

			/*h5移动端支付*/
			var obj = $('.aui-flex label input');
			var aliChannel = null;
			var wxChannel = null;

			// 定义支付方式切换 
			var state_type = 1;

			// 点击支付
			$('.aui-tabBar-btn').click(function() {
					// 选择支付方式  默认为支付宝样式
					if (obj[1].checked) {
						state_type = 1;
					} else if (obj[0].checked) {
						state_type = 2;
					}
					// 微信通道
					if (state_type == 1) {
						function plusReady() { // 获取支付通道  
							plus.payment.getChannels(function(channels) {
								for (var i in channels) {
									if (channels[i].id == "wxpay") {
										wxChannel = channels[i];
									} else {
										aliChannel = channels[i];
									}
								}
							}, function(e) {
								alert("获取支付通道失败：" + e.message);
							});
						})


					function checkServices(pc) {
						if (!pc.serviceReady) {
							var txt = null;
							switch (pc.id) {
								case 'alipay':
									txt = '检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？';
									break;
								default:
									txt = '系统未安装“' + pc.description + '”服务，无法完成支付，是否立即安装？';
									break;
							}
							plus.nativeUI.confirm(txt, function(e) {
								if (e.index == 0) {
									pc.installService();
								}
							}, pc.description);
						}
					}

					var w = null;
					var PAYSERVER = 'http://demo.dcloud.net.cn/payment/?payid=';
					// 支付
					function pay(id) {
						if (w) {
							return;
						} //检查是否请求订单中
						if (id === 'appleiap') {
							outSet('应用内支付');
							clicked('payment_iap.html');
							return;
						}
						outSet('----- 请求支付 -----');
						var url = PAYSERVER;
						if (id == 'alipay' || id == 'wxpay') {
							url += id;
						} else {
							plus.nativeUI.alert('当前环境不支持此支付通道！', null, '捐赠');
							return;
						}
						var appid = plus.runtime.appid;
						if (navigator.userAgent.indexOf('StreamApp') >= 0) {
							appid = 'Stream';
						}
						url += '&appid=' + appid + '&total=';

						w = plus.nativeUI.showWaiting();
						// 请求支付订单
						var amount = document.getElementById('total').value;
						var xhr = new plus.net.XMLHttpRequest();
						xhr.onreadystatechange = function() {
							switch (xhr.readyState) {
								case 4:
									w.close();
									w = null;
									if (xhr.status == 200) {
										outLine('----- 请求订单成功 -----');
										outLine(xhr.responseText);
										var order = xhr.responseText;
										plus.payment.request(pays[id], order, function(result) {
											outLine('----- 支付成功 -----');
											outLine(JSON.stringify(result));
											plus.nativeUI.alert('支付成功：感谢你的支持，我们会继续努力完善产品。', function() {
												back();
											}, '捐赠');
										}, function(e) {
											outLine('----- 支付失败 -----');
											outLine('[' + e.code + ']：' + e.message);
											plus.nativeUI.alert(
												'更多错误信息请参考支付(Payment)规范文档：http://www.html5plus.org/#specification#/specification/Payment.html',
												null,
												'支付失败：' + e.code);
										});
									} else {
										outLine('----- 请求订单失败 -----');
										outLine(xhr.status);
										plus.nativeUI.alert('获取订单信息失败！', null, '捐赠');
									}
									break;
								default:
									break;
							}
						}
						xhr.open('GET', url + amount);
						outLine('请求支付订单：' + url + amount);
						xhr.send();
					}


					mui.post('此处填写支付接口', {
							'此处填写所需参数'
						},
						function(data) {
							data = JSON.stringify(data.data);
							if (data) {
								plus.payment.request(wxChannel, data, function(result) {

									// 支付成功处理

								}, function(msg) {
									// JSON.stringify(msg.message)
									floatRemind('支付失败');
								});
							} else {
								plus.nativeUI.alert("支付失败");
							}
						});
				} else if (state_type == 2) {
					// 支付宝通道
					function plusReady() { // 获取支付通道  
						plus.payment.getChannels(function(channels) {
							for (var i in channels) {
								if (channels[i].id == "wxpay") {
									wxChannel = channels[i];
								} else {
									aliChannel = channels[i];
								}
							}
						}, function(e) {
							alert("获取支付通道失败：" + e.message);
						});
					})

				mui.post('此处填写支付接口', {
						'此处填写所需参数'
					},
					function(data) {
						console.log(JSON.stringify(data));
						if (data) {
							data = data.data.payStr;
							plus.payment.request(aliChannel, data, function(result) {

								// 支付成功处理

							}, function(e) {
								floatRemind("付费失败，用户已取消");
							});
						} else {
							plus.nativeUI.alert("支付失败");
						}
					});

			}
			})
			});
		</script>
	</body>
</html>
